<app-back-btn></app-back-btn>
<div class="page-title">
  <span class="title" *ngIf="!code">添加用户</span>
  <span class="title" *ngIf="code">修改用户</span>
</div>

<div class="panel panel-body">
  <form nz-form [formGroup]="validateForm" class="form-wrap" (submit)="addLeader($event)">
    <h2 class="subtitle">用户</h2>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzRequired>账号</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('account')">
        <input nz-input formControlName="account" type="text" placeholder="账号">
        <nz-form-explain
          *ngIf="getFormControl('account').dirty&&getFormControl('account').hasError('required')">
          请填写账号
        </nz-form-explain>
      </nz-form-control>
      <p nz-col [nzSm]="7" class="font12 pl color-gray mb0">
        自定义登录账号，确定后不可更改，最多32位。
      </p>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzRequired>密码</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('password')">
        <input nz-input formControlName="password" type="password" placeholder="密码">
        <nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').errors">
          <ng-container *ngIf="getFormControl('password').hasError('required')">请填写密码</ng-container>
        </nz-form-explain>
      </nz-form-control>
      <nz-form-control [nzSm]="7" class="font12 pl color-gray">
        即：登录密码与交易密码
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzRequired>真实姓名</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('realName')">
        <input nz-input formControlName="realName" type="text" placeholder="真实姓名">
        <nz-form-explain *ngIf="getFormControl('realName').dirty&&getFormControl('realName').errors">
          <ng-container *ngIf="getFormControl('realName').hasError('required')">请填写真实姓名</ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzRequired>国籍</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('country')">
        <input nz-input formControlName="country" type="text" placeholder="国籍">
        <nz-form-explain
          *ngIf="getFormControl('country').dirty&&getFormControl('country').hasError('required')">
          请填写国籍
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzRequired>区域</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('areaCode')">
        <nz-cascader [nzOptions]="options" [nzPlaceHolder]="'选择区域'"
                     name="areaCode" [ngModelOptions]="{standalone: true}"
                     [(ngModel)]="areaCode" (ngModelChange)="getAreas()">
        </nz-cascader>
        <nz-form-explain
          *ngIf="getFormControl('areaCode').dirty&&getFormControl('areaCode').hasError('required')">
          请选择地址
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <!--表单底部start-->
    <nz-form-item class="action-button">
      <nz-form-control class="text-center">
        <button nz-button [nzType]="'primary'" type="submit" class="pl-30 pr-30" [nzLoading]="isConfirmLoading">
          确定
        </button>
      </nz-form-control>
    </nz-form-item>
    <!--表单底部end-->
  </form>

</div>
